<template>
  <div class="detail_box_container">
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title=""
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="title">{{ this.$route.meta.title }}</div>
      <div>
        <img
          v-show="show"
          src="../../assets/img/m.png"
          alt=""
          @click="onClick"
        />
        <img
          v-show="!show"
          src="../../assets/img/l.png"
          alt=""
          @click="onClick2"
        />
        <img src="../../assets/img/fx.png" alt="" @click="useqrcode" />
      </div>
    </div>
    <!-- 二维码 -->
    <div class="Qrcode" v-show="Qrcodes">
      <van-icon name="cross" @click="onClickshow" />
      <canvas id="qrCodeCanvas"></canvas>
    </div>
    <!-- 视频 -->
    <div class="video_box">
      <video width="100%" height="100%" :controls="true" :Autoplay="true">
        <source
          v-for="(item, index) in video"
          :key="index"
          v-show="index === 0"
          :src="item.banner_src"
          type="video/mp4"
        />
      </video>
    </div>
    <!-- 视频介绍-->
    <div class="video_introduce">
      <div class="headline_box">
        <span>{{ this.showlist.title }}</span>
      </div>
      <!-- 课时时间 -->
      <div class="time">
        <div>{{ this.showlist.start_time | dateTime }}-</div>
        <div>-{{ this.showlist.end_time | dateTime }}</div>
        <div>共{{ this.showlist.course_count }}三个课时</div>
        <div>{{ this.showlist.course_classify_title }}</div>
      </div>
      <!-- 报名人数 -->
      <div class="NumberOfPeople">
        <i>已报名{{ this.showlist.sales_num }}人</i>
      </div>
      <!-- 名师 -->
      <div
        class="TopTeacher"
        v-for="(item, index) in this.showlist.teacher"
        :key="index"
        v-show="index < 3"
      >
        <img :src="item.avatar" alt="" class="img" />
        <div class="name">{{ item.teacher_name }}</div>
      </div>
    </div>
    <!-- 课前准备 -->
    <div class="BeforeClass_box">
      <div class="BeforeClass">
        <div class="title_box"><span>课前准备</span></div>
        <div class="statement_box">
          <div>{{ this.showlist.teacher_wechat_guided_words }}</div>
          <button>联系方式</button>
        </div>
      </div>
    </div>
    <!-- 课程 -->
    <div class="course">
      <van-tabs v-model="active">
        <van-tab title="课程详情">
          <div class="detail_img" v-html="this.showlist.course_details">
            {{ this.showlist.course_details }}
          </div>
        </van-tab>
        <van-tab title="课程安排">
          <div class="arrange">
            <van-collapse v-model="activeName" accordion>
              <van-collapse-item
                v-for="(item, index) in list"
                :key="index"
                :title="item.course_title"
                :name="index"
              >
                <div v-for="(item2, index) in item.list" :key="index">
                  {{ item2.title }}
                </div>
              </van-collapse-item>
            </van-collapse>
            <div class="dd"></div>
          </div>
        </van-tab>
        <van-tab title="资料下载">内容 3</van-tab>
        <van-tab title="课程评价">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getDetail } from "../../http/api";
import QRCode from "qrcode";
export default {
  data() {
    return {
      id: this.$route.query.id,
      showlist: [],
      Teacher: [],
      active: 0,
      list: [],
      activeName: "1",
      video: [],
      show: true,
      Qrcodes: false,
    };
  },
  created() {
    this.getDetails();
    console.log(this.id);
  },
  methods: {
    useqrcode() {
      this.Qrcodes = true;
      //生成的二维码内容，可以添加变量
      console.log("2221");
      this.QueryDetail = "https://wap.lexuemiao.com/detail?basis_id=701";
      var canvas = document.getElementById("qrCodeCanvas");
      QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
        if (error) console.error(error);
        console.log("success!");
      });
    },
    onClickshow() {
      this.Qrcodes = false;
    },
    async getDetails() {
      const res = await getDetail(this.id);
      console.log(res);
      this.video = res.data.data.banner;
      console.log(this.video);
      this.showlist = res.data.data.info; //视频介绍
      // this.Teacher = res.data.data.course;
      this.list = res.data.data.course_periods;
      console.log("课程安排", this.list);
      console.log(this.showlist);
      // console.log(this.showlist.course_details);
      // console.log(this.Teacher);
    },
    async onClick() {
      this.show = false;
    },
    onClick2() {
      this.show = true;
    },

    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.Qrcode {
  width: 80%;
  height: 6rem;
  // background-color: pink;
  position: absolute;
  top: 150px;
  left: 50px;
  z-index: 666 !important;
  i {
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: 5px;
    right: 10px;
  }
}
#qrCodeCanvas {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  img {
    width: 30px;
    height: 30px;
    margin-top: 5px;
    margin-right: 5px;
  }
}
.detail_box_container {
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
  position: relative;
}
.title {
  width: 100px;
  font-size: 20px;
  font-weight: 700;
  z-index: 666;
  position: absolute;
  top: 15px;
  left: 170px;
}
.video_box {
  width: 100%;
  height: 4.2rem;
  // background-color: red;
  border-bottom: 1px solid;
}
.video_introduce {
  width: 100%;
  height: 3rem;
  background-color: #fff;
  .headline_box {
    width: 90%;
    height: 30%;
    // background-color: skyblue;
    margin: 0 auto;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .time {
    width: 96%;
    height: 30px;
    // background-color: pink;
    display: flex;
    align-items: center;
    margin: 0 auto;
  }
  .time div {
    font-size: 15px;
    margin-left: 5px;
    color: #ccc;
  }
  .NumberOfPeople {
    width: 96%;
    height: 25px;
    // background-color: green;
    display: flex;
    align-items: center;
    margin: 0 auto;
    i {
      font-size: 15px;
      color: #ccc;
    }
  }
  .TopTeacher {
    width: 26%;
    height: 55px;
    // background-color: hotpink;
    margin: 0 auto;
    float: left;
    display: flex;
    .name {
      font-size: 14px;
      line-height: 55px;
      margin-left: 10px;
    }
  }
}
.img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 55px;
}
.BeforeClass_box {
  width: 100%;
  height: 1.8rem;
  background-color: #fff;
  margin-top: 15px;
}
.BeforeClass {
  width: 90%;
  height: 100%;
  // background-color: pink;
  margin: 0 auto;
  .title_box {
    width: 100%;
    height: 50%;
    // background-color: purple;
    font-size: 25px;
    display: flex;
    align-items: center;
  }
  .statement_box {
    width: 100%;
    height: 50%;
    // background-color: red;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      height: 25px;
      border-radius: 40px;
      background-color: #ef8a1f;
      color: #fff;
      border: none;
      outline: none;
    }
  }
}
.course {
  margin-top: 10px;
}
.detail_img {
  width: 100%;
}
.detail_img ::v-deep img {
  width: 100%;
}
.arrange {
  width: 100%;
  .dd {
    height: 1rem;
  }
}
.van-cell {
  height: 50px;
  background-color: #ccc !important;
}
</style>